<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>组基础信息</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <script src="/static/layui/layui.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <link rel="shortcut icon" href="/static/groupcheck.ico"/>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree layui-nav-side">
                <li class="layui-nav-item layui-this"><a href="javascript:;">组信息</a></li>
                <li class="layui-nav-item"><a href="/groupstat/domains">组域名统计</a></li>
            </ul>
        </div>
    </div>
    <div class="layui-body" style="top:15px;">
        <div style="padding-left: 16px;padding-right: 16px;">
            <form class="layui-form layui-row layui-col-space16">
                <div class="layui-col-md4">
                    <div class="layui-input-wrap" style="height: 38px;">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                       <!-- <input type="text" name="group_no" value="" placeholder="组号" class="layui-input" lay-affix="clear">-->
                        <select lay-search="" name="group_no">
                            <option value="">请选择组号</option>
                            <?php if(!empty($group_nos)){foreach ($group_nos as $gno){
                            ?>
                            <option value="<?php echo $gno;?>"><?php echo $gno;?></option>
                            <?php }} ?>
                        </select>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <button class="layui-btn" lay-submit lay-filter="table-search">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">清除</button>

                </div>
                <div class="layui-col-md4">
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" style="position: absolute;right: 20px;" lay-on="add_group">新增组号</button>
                </div>
            </form>
            <table class="layui-hide" id="table-list" lay-filter="table-list"></table>
        </div>
    </div>
</div>
<script>
    layui.use(['table', 'dropdown'], function(){
        var table = layui.table;
        var form = layui.form;
        var util = layui.util;

        // 搜索提交
        form.on('submit(table-search)', function(data){
            var field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('table-list', {
                url: '/groupstat/getIndexData',
                method: 'post',
                page: {
                    curr: 1, // 重新从第 1 页开始
                    limit: 20,
                },
                where: field // 搜索的字段
            });
            // layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
            return false; // 阻止默认 form 跳转
        });

        // 创建渲染实例
        table.render({
            title: '组号信息',
            elem: '#table-list',
            url: '/groupstat/getIndexData',
            method: 'post',
            css: [ // 重设当前表格样式
                '.layui-table-tool-temp{padding-right: 145px;}'
            ].join(''),
            cellMinWidth: 80,
            totalRow: false, // 开启合计行
            page: true,
            limit: 20,
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field:'id', fixed: 'left', width:80, title: 'ID', sort: true},
                {field:'group_no', width:120, title: '组号', sort: true},
                {field:'country', width:80, title: '国家', sort: true},
                {field:'group_name', title:'组名 <i class="layui-icon layui-icon-tips layui-font-14" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', fieldTitle: '组名', width:150, edit: 'text'},
                {field:'shell_link', title: '脚本链接 <i class="layui-icon layui-icon-tips layui-font-14" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', edit: 'text'},
                {field:'remark', title: '备注 <i class="layui-icon layui-icon-tips layui-font-14" title="该字段开启了编辑功能" style="margin-left: 5px;"></i>', edit: 'text'},
                {field:'created_at', title:'创建时间', width: 160},
            ]],
            error: function(res, msg){
                console.log(res, msg)
            }
        });
        // 单元格编辑事件
        table.on('edit(table-list)', function(obj){
            var field = obj.field; // 得到字段
            var value = obj.value; // 得到修改后的值

            // 修改字段值
            axios.post('/groupstat/saveGroupField', {id: obj.data.id, field: field, value: value}).then((response) => {
                if (response.data.code == 200) {
                    layer.msg('编辑成功', {icon: 1});
                } else {
                    // 编辑后续操作，如提交更新请求，以完成真实的数据更新
                    layer.msg(response.data.result, {icon: 2});
                }
            });

            // 其他更新操作
            var update = {};
            update[field] = value;
            obj.update(update);
        });

        // 事件
        util.on('lay-on', {
            'add_group': function(){
                layer.open({
                    type: 1,
                    area: '650px',
                    resize: false,
                    shadeClose: true,
                    title: '新增组号',
                    content: `
          <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
            <div class="demo-login-container">
                <div class="layui-form-item">
                    <label class="layui-form-label">组号</label>
                    <div class="layui-input-inline layui-input-wrap">
                      <input type="text" name="group_no" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">组名</label>
                    <div class="layui-input-block">
                      <input type="text" name="group_name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">脚本链接</label>
                    <div class="layui-input-block">
                      <input type="text" name="shell_link" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">国家</label>
                    <div class="layui-input-block">
                      <input type="radio" name="country" value="de" title="德国">
                      <input type="radio" name="country" value="it" title="意大利">
                      <input type="radio" name="country" value="fr" title="法国">
                      <input type="radio" name="country" value="jp" title="日本">
                      <input type="radio" name="country" value="us" title="美国">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">备注</label>
                    <div class="layui-input-block">
                      <textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
              <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="add-form">新 增</button>
              </div>
            </div>
          </div>
        `,
                    success: function(){
                        // 对弹层中的表单进行初始化渲染
                        form.render();
                        // 表单提交事件
                        form.on('submit(add-form)', function(data){
                            var field = data.field; // 获取表单字段值
                            axios.post('/groupstat/saveNewGroup', {
                                group_no:field.group_no,group_name:field.group_name,shell_link:field.shell_link,
                                country:field.country,remark:field.remark}).then((response) => {
                                if (response.data.code == 200) {
                                    layer.msg('新增成功', {icon: 1});
                                    layer.closeAll();
                                    table.reload('table-list', {
                                        url: '/groupstat/getIndexData',
                                        method: 'post',
                                        page: {
                                            curr: 1, // 重新从第 1 页开始
                                            limit: 20,
                                        }
                                    });
                                } else {
                                    layer.msg(response.data.result, {icon: 2});
                                }
                            });
                            // 阻止默认 form 跳转
                            return false;
                        });
                    }
                });
            }
        });
    });
</script>
</body>
</html>